<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>页面滚动驱动动画</title>
    <style>
      /*
        教程链接：https://juejin.cn/post/7259026189904805944
      */
      @keyframes ScrollingAnimation {
        0% {
          width: 0;
        }

        100% {
          width: 100%;
        }
      }

      .areaScroll1 {
        .progress1 {
          position: fixed;
          top: 0;
          left: 0;
          height: 20px;
          background-color: greenyellow;
          animation: ScrollingAnimation auto linear;
          animation-timeline: scroll();
        }
      }

      .areaScroll2 {
        position: fixed;
        top: 200px;
        left: 100px;
        width: 400px;
        height: 300px;
        overflow-y: auto;
        /* chrome117 暂不支持 2023年9月19日 */
        animation-timeline-name: --area-scroll;
        animation-timeline-axis: inline;
        /*
        或者：animation-timeline: --area-scroll inline;
        */

        .progress2 {
          position: absolute;
          top: 0;
          left: 0;
          height: 20px;
          background-color: greenyellow;
          animation: ScrollingAnimation auto linear;
          animation-timeline: --area-scroll;
        }
      }
    </style>
  </head>

  <body>
    <div class="areaScroll1">默认全局滚动
      <div class="progress1"></div>
      <div>
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
      </div>
    </div>
    <div class="areaScroll2">区域滚动
      <div class="progress2"></div>
      <div>
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
        empty<br />
      </div>
    </div>
  </body>

</html>
